<template>
  <div class='com-select pr'>
    <div class="all-menu hover" @click="showMenu">
      <span class="iconfont icon-quanbu"></span>
      <span>全部商品分类</span>
    </div>
    <div class="ano-menu">
      <span v-for="(item, index) in allMenu" :key="index" :class="{isActive:item.isActive,hover:true}" @click="changeMenu(item)">{{item.label}}</span>
    </div>
    <el-button type="warning" class="merchant-entry bc-yellow" round @click="doEntry"><span class="iconfont icon-bangdan mr10 ft18"></span> <span>实力商家入驻</span></el-button>

    <div class="pa com-menu-2" v-show="menu2Show"  @mouseout="hideMenu3">
      <div v-for="(item, index) in menu2" :key="index" @mouseenter ="getRightData(item.id)" @mousemove="showMenu3">
        <p class="menu2-title"><span :class="item.icon"></span><span>{{item.label}}产品专区</span></p>
        <p class="menu2-item-box">
          <span v-for="(opt, optIndex) in item.children" :key="optIndex" @click="getProduct('品名',opt.id)">{{opt.name}}</span>
        </p>
      </div>
    </div>

    <div class="pa com-menu-3" v-show="menu3Show" @mousemove="showMenu3" @mouseout="hideMenu3">
      <div class="left fl">
        <div v-for="(item, index) in menu3" :key="index">
          <p class="menu3-title">{{item.label}} <span class="fr color-blue hover" @click="doShowHide(item)">{{item | filterBtn}}</span></p>
          <p :class="{'menu3-item-box':true,'hide-more':item.showmore}">
            <span v-for="(opt, optIndex) in item.children" :title="opt" class="hover white-space" :key="optIndex" @click="getProduct(item.label,opt.id)">{{opt.name}}</span>
          </p>
        </div>
      </div>
      <div class="right fl">
        <div v-for="(item, index) in menu4" :key="index" v-show="index<12">
          <p class="title">
            <img :src="item.logo" alt="">
            <span>{{item.name}}</span>
          </p>
          <p class="intro white-space">{{item.businessScope}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MixIns from '@/mix/mix.js'
export default {
  components: {},
  name: "",
  data() {
    return {
      allMenu:[
        {label:"首页",router:"/homepage",isActive:true},
        {label:"找风商城",router:"/windshop",isActive:false,id:1},
        {label:"找水商城",router:"/watershop",isActive:false,id:2},
        {label:"找电商城",router:"/electricshop",isActive:false,id:3},
        {label:"找消防商城",router:"/fireshop",isActive:false,id:4},
        {label:"实单求购",router:"/purchase",isActive:false},
      ],

      menu2:[
        {
          icon:"iconfont icon-feng-m",
          label:"",
          id:0,
          children:["测试","测试"]
        },{
          icon:"iconfont icon-shui",
          label:"水类产品专区",
          id:0,
          children:["测试","测试"]
        },{
          icon:"iconfont icon-chongdianqi1",
          label:"电类产品专区",
              id:0,
          children:["测试","测试"]
        },{
          icon:"iconfont icon-chongdianqi1",
          label:"消防类产品专区",
              id:0,
          children:["测试","测试"]
        }
      ],
      menu3:[
        {
            id:0,
          label:"品名",
          showmore:true,//正在显示更多
          children:[]
        },{
            id:0,
          label:"商品名称",
          children:["测试"]
        },{
           id:0,
          label:"材质",
          children:["测试"]
        },{
           id:0,
          label:"特性",
          children:["测试"]
        }
      ],
      menu4:[
        {title:"浙江XXX药业",logo:require('@/assets/imgs/homepage/c_logo.png'),intro:"主营"},
        {title:"浙江XXX药业",logo:require('@/assets/imgs/homepage/c_logo.png'),intro:"主营"},
        {title:"浙江XXX药业",logo:require('@/assets/imgs/homepage/c_logo.png'),intro:"主营"},
        {title:"浙江XXX药业",logo:require('@/assets/imgs/homepage/c_logo.png'),intro:"主营"}
      ],
      menu2Show:true,//显示菜单2
      menu3Show:false,//显示菜单3

      settime:null
    };
  },
  filters:{
    filterBtn(item){
      return item.more?"隐藏":item.children.length>10?"更多":""
    },
    filterShow(item){
      return true
    }
  },
  methods: {
    /**
     * @name 刷新后初始化
     */
    init(){
      this.allMenu.forEach(ele=>{
        ele.isActive=ele.router===this.path
      })
      this.menu2Show=this.path==='/homepage'
      this.menu3Show=false

      //获取主分类数据
      _g.apiPost('protalHome/primeType.do',{pageSize:7}).then(res=>{
          if(res.status==0){
              res.data.forEach((el,index)=>{
                  this.$set(this.menu2[index],'label',res.data[index].name)
                  this.$set(this.menu2[index],'children',res.data[index].categoryDtoList)
                  this.$set(this.menu2[index],'id',res.data[index].id)
              })
          }else{
              _g.toMessage(res)
          }
      })
    },

    changeMenu(item){
      // this.allMenu.forEach(ele=>{ele.isActive=false})
      let goal = this.allMenu.find(val=>val.isActive)
      if(goal)goal.isActive=false
      this.$set(item,"isActive",true)
      if(item.router)this.$router.push({path:item.router,query:{id:item.id}})
      this.menu2Show=item.router==='/homepage'
      this.menu3Show=false
    },

    /**
     * @name 显示或者隐藏
     */
    doShowHide(item){
      this.$set(item,'showmore',!item.showmore)
    },

    /**
     * @name 显示隐藏总menu
     */
    showMenu(){
      this.menu2Show=!this.menu2Show
    },
      getRightData(id){
          //获取右侧主分类
          _g.apiPost('protalHome/childType.do',{id:id,pageSize:7}).then(res=>{
              if(res.status==0){
                  res.data.forEach((el,index)=>{
                      this.$set(this.menu3[index],"children",el.categoryDtoList)
                      this.$set(this.menu3[index],"id",el.id)
                  })
              }else{
                  _g.toMessage(res)
              }
          })

          //获取右侧店铺
          _g.apiPost('protalHome/getMerchantByKind.do',{id:id,pageSize:10}).then(res=>{
              if(res.status==0){
                  this.$set(this,"menu4",res.data)
              }else{
                  _g.toMessage(res)
              }
          })

      },

    showMenu3(id){
      clearTimeout(this.settime)
      this.menu3Show=true
    },
    hideMenu3(){
      clearTimeout(this.settime)
      this.settime=setTimeout(()=>{
        this.menu3Show=false
      },100)
    },

    /**
     * @name 商家入驻
     */
    doEntry(){
      console.log("商家入驻");
    },
    getProduct(type,categoryId){
        console.log(type);
        console.log(categoryId);
        //this.$router.push({path:"/windshop",query:{categoryId:categoryId}})
        switch (type){
            case "品名":
                this.$router.push({path:"/windshop",query:{topNameId:categoryId}})
                return
            case "商品名称":
                this.$router.push({path:"/windshop",query:{nameId:categoryId}})
                return
            case "材质":
                this.$router.push({path:"/windshop",query:{materialsId:categoryId}})
                return
            case "特性":
                this.$router.push({path:"/windshop",query:{featuresId:categoryId}})
                return
        }
    }
  },
  created() {
    this.init()
  },
  mixins:[MixIns]
};
</script>
<style lang="scss" scoped>
.com-select {
  height: 50px;
  line-height: 50px;
  // background-color: red;
  display: flex;

  .all-menu{
    width: 250px;
    font-size: 20px;
    background-color: $blue;
    color: #fff;
    
    .icon-quanbu{
      font-size: 22px;
      padding: 0 20px;
    }
  }
  .ano-menu{
    display: flex;
    color: #333;
    padding: 0 10px;

    span{
      display: inline-block;
      min-width: 120px;
      text-align: center;
    }
    span.isActive{
      box-sizing: border-box;
      border-bottom: 2px solid $blue;
      color: $blue;
    }
  }
  .merchant-entry{
    height: 40px;
    margin-left: auto;
    color: #fff;
    padding: 0 20px;
    width: 180px;

    span{
      line-height: 35px
    }
  }

  .com-menu-2{
    top: calc(100% + 1px);
    width: 250px;
    height: 450px;
    background-color: #4d5566;
    line-height: 25px;
    box-sizing: border-box;
    color: #ccc;
    font-size: 14px;
    z-index: 100;

    >div{
      height: 25%;
      padding: 10px;
      box-sizing: border-box;
      overflow: hidden;
    }
    >div:hover{
      background-color: #000;
    }
    .iconfont{
      font-size: 20px;
      margin-right: 5px;
      float: left;
    }
    .menu2-item-box{
      padding-left: 30px;
      color: #fff;
      margin: 5px 0;
      display: flex;
      flex-wrap: wrap;

      span{
        padding: 0 5px;
      }
      span:hover{
        color: red;
        cursor: pointer;
      }
    }
  }
  .com-menu-3{
    top: calc(100% + 1px);
    left: 250px;
    width: calc(100% - 250px);
    height: 449px;
    background-color: #fff;
    line-height: 25px;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 1px 1px 5px 1px #ccc;
    z-index: 100;

    .left{
      width: 600px;
      height: 100%;
      padding: 0 10px;
      padding-right: 50px;
      font-size: 13px;
      color: #000;
      box-sizing: border-box;
      overflow-y: auto;
      border-right: 1px solid #ccc;
      // display: flex;
      // flex-direction: column;
      // justify-content: space-between;

      >div{
        min-height: 20%;
        border-bottom: 1px solid #ccc;
        margin-top: 10px;
      }
      >div:nth-last-of-type(1){
        border: none;
      }
      .menu3-title{

        .color-blue{
          font-size: 12px;
        }
      }
      .menu3-item-box{
        display: flex;
        flex-wrap: wrap;
        width: calc(100%);
        min-height: 50px;

        span{
          line-height: 25px;
          height: 25px;
          color: #666;
          display: inline-block;
          width: 20%;
          text-align: center;
        }
        span:hover{
          color: red;
        }
      }
      .menu3-item-box.hide-more{
        height: 50px;
        overflow: hidden
      }
    }
    .right{
      width: 330px;
      padding: 10px;
      box-sizing: border-box;
      height: 100%;

      >div{
        float: left;
        width: 50%;
        height: calc(100% / 6);

        p{
          display: flex;
          
        }
        .title{
          font-size: 14px;
          text-align: center;

          img{
            margin-right: 10px;
            width: 15%;
            height: calc(100% / 12);
          }
        }
        .intro{
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
}
</style>